// 我的辅导查看
<template>
  <div class="app-container">
    <!-- 查看对话框 -->
    <el-dialog
      title="查 看"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <el-steps direction="vertical" :active="3">
          <el-step :title="index + 1" v-for="(item, index) in 3" :key="index">
            <template slot="description">
              <div class="rabbet">
                <div>
                  <div>第一阶段</div>
                  <div>2023-03-15~2023-04-12</div>
                </div>
                <div class="scheme" @click="check">查看方案</div>
                <div class="tickling">
                  <div>学生反馈</div>
                  <div>整体帮助还行，案例不够新怡，贴合实际生活</div>
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">提 交</el-button> -->
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查 看"
      :visible.sync="project"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table v-loading="loading" :data="scaleList" :border="true">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="方案名称"
          align="center"
          key="name"
          prop="name"
        />

        <el-table-column
          label="方案类型"
          align="center"
          prop="createTime"
          :show-overflow-tooltip="true"
          width="300"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startDate }}</span>
            <span>—</span>
            <span>{{ scope.row.endDate }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="230"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-share"
              @click="viewDetails(scope.row)"
              v-hasPermi="['system:user:edit']"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="project = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查 看"
      :visible.sync="details"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form"  label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="方案名称：" prop="name">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方案类型" prop="type">
              <el-select v-model="form.type" clearable disabled>
                <el-option
                  v-for="dict in dict.type.scheme_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="适应对象:" prop="applicableObject">
              <el-select v-model="form.applicableObject" disabled>
                <el-option
                  v-for="dict in dict.type.suitable_object"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅助时长" prop="counselingStart">
              <el-input
                v-model="form.counselingStart"
                style="width: 90px"
                disabled
              ></el-input>
              至
              <el-input
                v-model="form.counselingEnd"
                style="width: 90px"
                disabled
              ></el-input>
              天
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容">
              <editor v-model="form.content" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="details = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  formSetting, //测评详情
} from "@/api/itemBank/index";

export default {
  name: "User",
  dicts: ["scheme_type", "suitable_object"],
  components: {},
  data() {
    return {
      open: false,
      project: false,
      details: false,
      scaleList: [],
      // 懒加载
      loading: false,
      // 总条数
      total: 0,
      // 方案详情
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  created() {},
  methods: {
    /** 查询测评列表 */
    getList() {
         this.loading = false;
         return
      this.loading = true;
      this.queryParams.measureType = "2";
      formSetting(this.queryParams).then((response) => {
        this.scaleList = response.rows;
        this.scaleList.forEach((ve) => {
          ve.serial = 0;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查看方案
    check() {
      this.project = true;
      this.getList();
    },
    //方案详情
    viewDetails() {
      this.details = true;
    },
  },
};
</script>
<style scoped lang="scss">
.learnTiter {
  width: 100%;
  padding: 5px;
  color: #569cd6;
}
.details {
  height: 540px;
  margin: 0 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.rabbet {
  // width: 500px;
  height: 60px;
  display: flex;
}
.scheme {
  margin: 0 15px;
  background-color: #ecf5ff;
  border-radius: 5px;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  border: 1px solid #569cd6;
}
.tickling {
  display: flex;
  div:nth-child(1) {
    color: #000;
    height: 30px;
    padding: 0 5px;
  }
  div:nth-child(2) {
    width: 360px;
    margin-left: 10px;
    color: #000;
    height: 60px;
    padding: 3px 10px;
    border: 2px solid #ecf5ff;
    border-radius: 6px;
  }
}
</style>
